<template>
  <div class="strut-div">
    <div :id="config.option.id" class="strut-div"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import autoHover from '../../util/autoHover.js';

  let glNum = 12
  let gsNum = 84.9
  let gltcNum = 2208.2
  export default {
    name: "CommonAnnularChart",
    props: ['config'],
    data() {
      return {
        chart: null,
        timeTicket: null,
      }
    },
    methods: {
      initChart() {
        let option = {
          tooltip: {
            show: true,//防止鼠标移到不需要的数据上弹出label
            trigger: 'item',
            formatter: "{a} : {c} ({d}%)"
          },
          color: ['#3FECFF', '#FBCC13', '#16BC90'],
          legend: {
            textStyle: {
              color: '#fff'
            },
            orient: 'vertical',
            x: '5%',
            top: '20%',
            itemHeight: 10,//图例的高度
            itemWidth: 10,//图例的宽度
            itemGap: 10,//图例之间的间距
            data: ['公交车线路有' + glNum + '条', '高速公路' + gsNum + '公里', '公路通车里程' + gltcNum + '公里']//图例的名字需要和饼图的name一致，才会显示图例
          },
          graphic: {
            type: 'text',               // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
            top: 'center',              // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
            left: 'center',             // 同上
            style: {
              text: this.config.option.graphicTxt,       // 文本块文字。可以使用 \n 来换行。[ default: '' ]
              fill: '#fff',           // 填充色。
              fontSize: 16,           // 字体大小
              fontWeight: 'bold'		// 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
            }
          },
          series: [
            {
              name: '公路通车里程' + gltcNum + '公里',
              type: 'pie',
              radius: ['35%', '30%'],//环的位置
              center: ['55%', '50%'],
              hoverAnimation: false,
              label: {
                normal: {
                  position: 'inner'
                }
              },
              data: [
                {
                  value: gltcNum, //需要显示的数据
                  itemStyle: {
                    normal: {
                      color: '#3FECFF'
                    }
                  }
                },
                {
                  value: 3808.2, //不需要显示的数据，颜色设置成和背景一样
                  itemStyle: {
                    normal: {
                      color: 'transparent'
                    }
                  }
                }
              ]
            },
            {
              name: '高速公路' + gsNum + '公里',
              type: 'pie',
              radius: ['40%', '45%'],
              center: ['55%', '50%'],
              label: {
                normal: {
                  position: 'inner'
                }
              },
              hoverAnimation: false,
              data: [
                {
                  value: gsNum,
                  itemStyle: {
                    normal: {
                      color: '#FBCC13'
                    }
                  }
                },
                {
                  value: 150,
                  itemStyle: {
                    normal: {
                      color: 'transparent'
                    }
                  },
                }
              ]
            },
            {
              name: '公交车线路有' + glNum + '条',
              type: 'pie',
              radius: ['55%', '50%'],
              center: ['55%', '50%'],
              label: {
                normal: {
                  position: 'inner'
                }
              },
              hoverAnimation: false,
              data: [
                {
                  value: glNum,
                  itemStyle: {
                    normal: {
                      color: '#16BC90'
                    }
                  }
                },
                {
                  value: 5,
                  itemStyle: {
                    normal: {
                      color: 'transparent'
                    }
                  }
                }
              ]
            },
          ]
        };

        setTimeout(() => {
          this.chart.setOption(option);
          // this.timeTicket = autoHover.autoHover(this.chart, option, option.series.length);
        }, 300);

      }
    },
    mounted() {
      this.chart = echarts.init(document.getElementById(this.config.option.id));
    },
    // beforeDestroy() {
    //   autoHover.stopHover(this.timeTicket);
    // }
  }
</script>

<style scoped lang="scss" type="text/scss">

</style>
